<template>
    <div class="diseaselist">
        <Row>
            <Col :xs="24">
                <div class="margin-up-down">
                    <Button @click="add" type='info' class="abs-right">
                        <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
                    </Button>
                </div>
                <div class="margin-up-down">
                    <Input class="w-input" v-model="searchKey" placeholder="权限/备注"/>
                </div>
                <div class="margin-up-down">
                    <Button type="primary" @click="loadPage(1)">
                        <Icon type="ios-search" size="14"/>
                    </Button>
                </div>               
            </Col>
        </Row>
        <Table class="m-table" stripe :columns="columns" :data="dataList"></Table>
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage"/>
        </div>
        <Modal
            v-model="modalStatus"
            :title="modalTitle"
            :closable="false"
            :width = '550'
            :footer="null">
                <div class = 'main'>
                    <p class="title">基本信息</p>
                    <Form ref="formInline" :model="info" :rules="infoRules" inline class="formcont">
                        <Row>
                            <Col :xs="4" >
                                <i class="req-icon">*</i>权限路径：
                            </Col>
                            <Col :xs="20">
                                <FormItem class="fullItem" prop="name">
                                    <Input
                                        class="w-input"
                                        v-model="info.name"
                                        placeholder="请输入权限路径"
                                        maxlength="200"
                                    />
                                </FormItem>
                            </Col>
                        </Row>                          
                        <Row>
                            <Col :xs="4">
                                <i class="req-icon"></i>备注：
                            </Col>
                            <Col :xs="20">
                                <FormItem class="fullItem" prop="remark">
                                    <Input
                                        v-model="info.remark"
                                        type="textarea"
                                        :autosize="{ minRows: 3, maxRows: 3 }"
                                        placeholder="备注"
                                        maxlength="64"
                                    />
                                </FormItem>
                            </Col>
                        </Row>                           
                    </Form>
                </div>
                <div slot="footer">
                    <div class="butbox">
                        <Button type="primary" @click="submit('formInline')" :disabled = 'btuStatus' class="btn">
                            <Icon type="ios-checkmark" class="icon"/>提交
                        </Button>
                        <Button @click="modalStatus = false" class="btn">
                            <i class = "iconfont icon-butongyi icon"></i>返回
                        </Button>      
                    </div>
                </div>
        </Modal>
    </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    data() {
        return {
            searchKey: "",
            columns: [
                { title: "排序", key: "iNum", align: "center", width: 80,
                    render: (h, params) => {
                        let iNum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iNum);
                    }
                },
                { title: "权限路径", key: "name", align: "center", width: 450 },
                {
                    title: "备注",
                    key: "remark",
                    align: "center",
                    // width: 430
                },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    width: 120,
                    render: (h, params) => {
                        let id = params.row.id;
                        return [
                            h(
                                "a",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    on: {
                                        click: () => {
                                            this.editBId(id)
                                        }
                                    }
                                },
                                "编辑"
                            )
                        ];
                    }
                }
            ],
            dataList: [],
            count: 0,
            pageSize: 10,
            pageNo: 1,
            modalStatus: false,
            modalTitle:"菜单权限新增",
            id: null,
            info: {
                name: null,
                remark: null
            },
            infoRules: {
                name: [
                    {
                        required: true,
                        message: "权限路径不能为空",
                        trigger: "blur"
                    }
                ]
            },
            btuStatus: false,
        };
    },
    created() {
        this.searchKey = this.$route.query.searchKey
            ? this.$route.query.searchKey
            : "";
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/configuration/admin/user/list",
                title: "帐号权限配置"
            },
            {
                path: "/index/configuration/authorityManagement/list",
                title: "菜单权限"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo
            ? parseInt(this.$route.query.pageNo)
            : 1;
        //上来就加载第一页数据
        this.loadPage(pageNo);
    },
    methods: {
        //获取详情
        editBId(id) {
            this.modalTitle = "菜单权限编辑",
            this.modalStatus = true
            this.$axios
                .post(api.findAuthById, { id })
                .then(resp => {
                    this.info = resp.data.object;
                })
                .catch(err => {
                    // this.$Message.info("服务器超时，请重新访问")
                });
        },
        //加载列表数据
        loadPage(pageNo) {
            this.pageNo = parseInt(pageNo);
            let params = {};
            params.searchKey = this.searchKey.trim();
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            this.$axios
                .post(api.findAuthPageList, params)
                .then(resp => {
                    if (resp.data.success) {
                        this.count = resp.data.object.total;
                        this.dataList = resp.data.object.records;
                        for (let i = 0; i < this.dataList.length; i++) {
                            let item = this.dataList[i];
                            this.dataList[i].iNum = i + 1;
                        }
                    } else {
                        this.$Message.info("不允许访问");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        submit(name) {
            this.btuStatus = true
            this.$refs[name].validate(valid => {
                if (valid) {
                    let subMitObj = {};
                    let noticeMsg = "";
                    if(this.info.id){
                        noticeMsg = '修改'
                    } else {
                        noticeMsg = '新增'
                    }
                    subMitObj.id = this.info.id ? parseInt(this.info.id) : null;
                    subMitObj.name = this.info.name.trim();
                    subMitObj.remark = this.info.remark.trim();
                    this.$axios
                        .post(api.saveAuth, subMitObj)
                        .then(resp => {
                            if (resp.data.code == 1) {
                                this.$Message.success(noticeMsg + "成功");
                                this.modalStatus = false
                                this.btuStatus = false
                                this.loadPage(this.pageNo)
                            } else {
                                this.$Message.error(noticeMsg + "失败，请重试");
                                this.btuStatus = false
                            }
                        })
                        .catch(err => {
                            console.log(err);
                            this.btuStatus = false
                        });
                } else {
                    this.$Message.error("请完整填写必填项");
                    this.btuStatus = false
                }
            });
        },
        add() {
            this.modalStatus = true
            this.info.name = ''
            this.info.remark = ''
            this.info.id = ''
        }
    }
};
</script>
<style lang="less" scoped>
.diseaselist {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .w-input {
        width: 200px;
    }
    .m-table {
        margin: 10px 0;
    }
    .page{
        text-align: center;
        margin: 20px 0;
    }
}
.tit {
        margin:10px 0;
        font-weight:bold;
        text-align:center;
    }
    .main{
        width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;         
        }
        .formcont {
            width: 95%;
            margin: 0 auto;
            .suojin {
                margin-left: 10px;
            }
        }
        .w-input {
            width: 100%;
        }
        .req-icon {
            font-size: 18px;
            color: red;
            display: inline-block;
            height: 18px;
            width: 18px;
            text-align: center;
            line-height: 18px;
            vertical-align: middle;
        }
        .fullItem {
            width: 100%;
        }
    }   
    .butbox {
        text-align: center;
        margin: 20px auto;
        .icon {
            font-size: 14px;
            margin-right: 5px;
        }
        .btn {
            height: 35px;
            width: 75px;
        }
    }       
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>